import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EmployeeListComponent } from './employee-list/employee-list.component';
import { DataGeneratorService } from './data-generator.service';
import { Employee } from './employee';

const NUM_RANGE: [number, number] = [27, 30];

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <main class="flex justify-center space-x-36 mt-8">
      <app-employee-list
        [employees]="sales"
        (add)="add(sales, $event)"
        (remove)="remove(sales, $event)"
      />
      <app-employee-list
        [employees]="techs"
        (add)="add(techs, $event)"
        (remove)="remove(techs, $event)"
      />
    </main>
  `,
  styleUrls: ['./app.component.css'],
  imports: [CommonModule, EmployeeListComponent],
})
export class AppComponent {
  title = 'performance-optimization';

  generator = inject(DataGeneratorService);

  sales = this.generator.generate([0, 70], NUM_RANGE);
  techs = this.generator.generate([70, 140], NUM_RANGE);

  add(list: Employee[], name: string) {
    list.unshift({ name, rand: this.generator.rand(NUM_RANGE) });
  }

  remove(list: Employee[], item: Employee) {
    list.splice(list.indexOf(item), 1);
  }
}
